<template>
  <el-container>
    <Environment ref="Environment"></Environment>
    <el-header>
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="22">
          <div>
            <WorkspaceSelect></WorkspaceSelect>
            <el-select v-model="enviroment.current" size="small">
              <el-option v-for="env in enviroment.options"
                v-bind:key="env.id"
                :label="env.name"
                :value="env.id"></el-option>
              <!-- <el-option label="正式环境" value="正式环境"></el-option>
              <el-option label="测试环境" value="测试环境"></el-option> -->
            </el-select>
            <el-button style="font-weight: 600; color: mediumseagreen" size="small" @click="updateEnvironment">env</el-button>
            <el-button class="el-button-theme" size="small" icon="el-icon-document" @click="openDocument"></el-button>
          </div>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-s-tools" circle></el-button>
          <!-- <el-avatar size="small" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar> -->
          <el-dropdown  @command="handleCommand">
            <span class="el-dropdown-link">
              {{this.$store.state.user.name}}
            </span>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item command="logout">注销</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>

    </el-header>
    <el-container>
      <el-aside width="380px">
        <div class="aside-menu">
          <DirectoriesMenu></DirectoriesMenu>
        </div>
      </el-aside>
      <el-main>
        <el-tabs v-model="currentRequestTab" type="card" closable @edit="handleTabsEdit">
          <el-tab-pane
            v-for="(item) in requestTabs"
            :key="item.name"
            :name="item.name"
            :label="item.title"
          >
            <request-frame ref="MainRequest" :input="item.content"></request-frame>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <el-footer height="40px">
      放点啥
    </el-footer>
</el-container>
</template>

<style scoped>
  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width : 1px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background-color: rgb(255, 210, 210);
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px  rgb(255, 255, 255);
    border-radius: 10px;
    background   : #ededed;
  }
</style>
<style scoped>

  .el-header {
      height: 60px;
      line-height: 60px;
      color: black;
      font-size: large;
      border-bottom: 1px solid gainsboro;
      background-color: mediumseagreen;
  }

  .el-button-theme{
    background: white;
    border: 1px solid white;
    color: mediumseagreen;
  }

  .el-main {
      padding: 0px 0px 0px 10px;
  }

  .el-footer {
    height: 40px !important;
    line-height: 40px;
    border-top: 1px solid #e2e2e2;
    color:#bdbcbc
  }

 .request-environment {
    float: right;
    height: 18px;
    width: 18px;
    line-height: 18px;
    margin: 12px 0 9px 10px;
    text-align: center;
    font-size: 12px;
    color: #d3dce6;
    cursor: pointer;
    -webkit-transition: all .15s;
    transition: all .15s;
  }
  /**

   */
</style>

<script>
import { read } from '@/api/enviroment'
import Environment from '@/components/Environment'
import MainRequest from '@/components/MainRequest'
import WorkspaceSelect from '@/components/WorkspaceSelect'
import DirectoriesMenu from '@/components/DirectoriesMenu'
import { EventBus } from "@/utils/event-bus";

export default {
  name: 'index',
  data () {
    return {
      workspace: this.$store.state.app.workspace,
      proxy: false,
      enviroment: {
        current: '测试环境',
        options: []
      },
      currentRequestTab: '',
      requestTabs: []
    }
  },
  created() {
    EventBus.$on("openRequest", (param) => {
      this.addTab(param)
    });

    EventBus.$on("changeRequestTab", ({id, title}) => {
      for(var i in this.requestTabs) {
        if(this.requestTabs[i].name === id) {
          this.requestTabs[i].title = title
          return
        }
      }
    });
  },
  watch: {
      workspace: {
          handler(newValue, oldValue) {
            this.currentRequestTab = '',
            this.requestTabs = [],
            this.loadEnviroment()
          },
          deep: true
      },
      enviroment: {
        handler(newValue, oldValue) {
          this.$store.commit('app/setEnviroment', newValue.current)
        },
        deep: true
      }
  },
  components: {
    'request-frame': MainRequest,
    Environment,
    WorkspaceSelect,
    DirectoriesMenu
  },
  mounted() { },
  beforeDestroy(){ },
  methods: {
    init(){

    },
    addTab(param) {
      if(param.isNew) {
        param.id = this.uuid()
      }
      for(var i in this.requestTabs) {
        if(this.requestTabs[i].name === param.id) {
          this.currentRequestTab = param.id
          return
        }
      }
      this.requestTabs.push({
        title: param.name,
        name: param.id,
        content: param
      });
      this.currentRequestTab = param.id;
    },
    handleTabsEdit(targetName, action) {
      if (action === 'remove') {
        let tabs = this.requestTabs;
        let activeName = this.currentRequestTab;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.currentRequestTab = activeName;
        this.requestTabs = tabs.filter(tab => tab.name !== targetName);
      }
    },
    openDocument(){
      let routerJump = this.$router.resolve({
        path: '/document',
        query: {
          id: this.workspace.current.id
        }
      })
      window.open(routerJump.href, '_blank')
    },
    handleCommand(command) {
      switch(command){
        case 'logout':
           this.$store.dispatch('user/logout').then(() => {
            location.reload()
            this.loading = false
          }).catch((ex) => {
            this.loading = false
          })
          break;
      }
    },
    loadEnviroment(){
      let that = this
       read(this.workspace.current.id)
        .then(response => {
          var array = response.data
          that.enviroment.options = array
          that.enviroment.current = array.length > 0 ? array[0].id : ''
        })
    },
    updateEnvironment(){
      var array = this.enviroment.options
      this.$refs.Environment.open(array)
    },
    // 获取uuid
    uuid() {
      var s = [];
      var hexDigits = "0123456789abcdef";
      for (var i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4";  // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);  // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";

      return s.join("")
    },
  }
}
</script>

<!-- https://www.cnblogs.com/jdWu-d/p/11898666.html -->
